<template>
  <div id="policyList">
    <div class="top_content">
        <div class="title">
            <h1>政策</h1>
            <p>policy</p>
        </div>
    </div>
    <div class="mid_content">
        <ul class="clearfix">
            <li :class="contIndex== index? 'nowsli normalLi' : 'normalLi'" v-for="(item,index) in tabList" :key="item.id" @click="contIndex = index">
                {{item}}
            </li>
        </ul>
        <!-- <div class="title"><span class="leftSpan"></span><div class="con_title">公司简介</div></div> -->
        <ul>
            <li class="listLi ellipsis" v-for="(item,index) in allList" :key="item.id" @click="toDetail(index)">
                · {{item.title}} <span class="floatRight">{{item.date}}</span>
            </li>
        </ul>
        <div class="fenye">
            <el-pagination background layout="prev, pager, next" :total="10" />
        </div>
        
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            tabList:['最新政策','全部政策','国家政策','地方政策','政策解读'],
            contIndex:0,
            allList:[{"organization":"生态环境部","title":"生态环境部:关于发布《碳排放权登记管理规则（试行）》《碳排放权交易管理规则（试行）》和《碳排放权结算管理规则（试行）》的公告","date":"2022-05-20","id":"1"},
            {"organization":"生态环境部","title":"生态环境部:关于发布《碳排放权登记管理规则（试行）》《碳排放权交易管理规则（试行）》和《碳排放权结算管理规则（试行）》的公告","date":"2022-05-20","id":"1"},
            {"organization":"生态环境部","title":"生态环境部:关于发布《碳排放权登记管理规则（试行）》《碳排放权交易管理规则（试行）》和《碳排放权结算管理规则（试行）》的公告","date":"2022-05-20","id":"1"}]
        }
    },
    methods:{
        handleSelect(key,keypath){
            console.log(key)
        },
        to(name){
            this.$router.push(name);
        },
        toDetail(idnex){
            this.$router.push({path:'articleRead',query:{back:'policyList'}});

        }
    }
}
</script>

<style>
#AboutUs{
    position: relative;
}
.top_content{
    width:100%;
    height:480px;
    background: url("../assets/a.png");
    background-size: cover !important;
    background-repeat: round !important;
    text-align: center;
    overflow:hidden;

}
.top_content .title{
    margin-top: 160px;
    color: #333;
}
.mid_content{
    width: 1080px;
    position:relative;
    left: 50%;
    margin-left:-540px;
    top:-200px;
    min-height: 600px;
    -webkit-box-shadow: 0 11px 24px rgba(0, 17, 54, 0.58);
    -moz-box-shadow: 0 11px 24px rgba(0, 17, 54, 0.58);
    box-shadow: 0 11px 24px rgba(0, 17, 54, 0.58);
    background: #ffffff;
    padding: 30px 40px;
    box-sizing: border-box;
}
.mid_content .title{
    font-size: 22px;
    line-height: 30px;
    overflow: hidden;
    color:#333;

}
.title .con_title{
    margin-left:10px;
    margin-top: -5px;
}
ul{
    list-style: none;

}
.normalLi{
    padding: 10px 20px;
    border: 1px solid #efefef;
    border-radius: 4px;
    color:#666;
    font-size: 14px;
    margin-left: 10px;
    margin-block: 10px;
    float: left;
    width: auto;
}
.nowsli{
    background: #333;
    color:#fff;
}
.normalLi:hover{
    cursor: pointer;
}
.listLi{
    line-height: 30px;
    border-bottom: 1px solid #efefef;
    padding: 4px 10px;
}
.listLi:hover{
    cursor: pointer;
    color: red;
}
.el-pagination.is-background .el-pager li:not(.is-disabled).is-active{
    background-color: #333;
}
.fenye{
    position: absolute;
    bottom: 30px;
    left:100px;
}
</style>